<template>
  <!-- vue3页面 -->

  <a-card class="main" style="padding: 24px">
    <!-- {{ JSON.stringify(statr) }}
    {{ JSON.stringify(hoverIndex) }}
    {{ JSON.stringify(startOffset) }} -->
    <div>
      <a-divider dashed style="border-color: #0092ff">
        <span style="font-size: 18px">老行政楼教工之家</span>
      </a-divider>
      <div
        class="item"
        draggable="true"
        ref="mainBox"
        @dragover="handleGridDragOver($event)"
      >
        <a-card
          ref="workHome"
          hoverable
          style="width: 310px"
          class="item-card"
          :style="{
            border: hoverIndex === index ? '1px solid #1890ff' : '',
          }"
          draggable="true"
          v-for="(item, index) in list"
          :key="item.id"
          @dragstart="handleDragStart($event, index)"
          @dragend="handleDragEnd($event, index)"
          @dragover="handleDragOver($event, index)"
          @drop="handleDrop($event, index)"
          @dragenter="handleDragEnter($event, index)"
        >
          <template #cover>
            <div class="pic">
              {{ item.title }}
            </div>
          </template>
          <!-- <a-card-meta title="综合会议室">
            <template #description>
              <p class="text">地址：老行政楼工会101</p>
              <p class="text">时间：校工会预约安排</p>
              <p class="text">对象：全校教职工</p>
              <p class="text">联系方式：孙殷彤13761310603</p>
            </template>
          </a-card-meta> -->
        </a-card>
      </div>
    </div>
    <!-- <button @click="sort">点击</button>
    <div>
      <ul class="ces" ref="mainBox">
        <li
          ref="workHome"
          draggable="true"
          v-for="(item, index) in list"
          :key="item.id"
          @dragstart="handleDragStart($event, index)"
          @dragend="handleDragEnd($event, index)"
          @dragover="handleDragOver($event, index)"
          @drop="handleDrop($event, index)"
          @dragenter="handleDragEnter($event, index)"
        >
          {{ index }}
        </li>
      </ul>
    </div> -->
  </a-card>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
const list = ref([
  { id: "123", title: "第一个" },
  { id: "456", title: "第二个" },
  { id: "789", title: "第三个" },
  { id: "101", title: "第四个" },
  { id: "102", title: "第五个" },
  { id: "103", title: "第六个" },
]);
const workHome = ref<HTMLElement[] | any>(null);
const hoverIndex = ref<null | number>(null);
const mainBox = ref<HTMLElement | any>(null);
// const dragEl = ref<HTMLElement | any>(null);
// const cloneDragEl = ref<HTMLElement | any>(null);

const startP = ref<any>({});
const startI = ref<null | number>(null);
const endI = ref<null | number>(null);
console.log(endI);

const endP = ref<any>({});

onMounted(() => {});

const getTranslate = (index: number): any => {
  const rect = workHome.value[index].getBoundingClientRect();
  return rect;
};

const handleDragStart = (_: any, val: number) => {
  startI.value = val;
  let p = getTranslate(val);
  startP.value = {
    x: p.left,
    y: p.top,
  };
  // console.log(startP.value);
};

const handleDragEnd = (_: any, val: number) => {
  console.log(val);

};

const handleDragOver = (_: any, val: number) => {
  console.log(val);

};

const handleGridDragOver = (_: any) => {};

const handleDrop = (_: any, val: number) => {
  console.log(val);
  
};

const handleDragEnter = (e: DragEvent, val: number) => {
  console.log(e);
  

  if (workHome.value[val].$el === workHome.value[startI.value as number].$el) {
    return;
  }

  if (val + 1 === workHome.value.length) {
    mainBox.value.insertBefore(
      workHome.value[startI.value as number].$el,
      null
    );
  } else {
    mainBox.value.insertBefore(
      workHome.value[startI.value as number].$el,
      workHome.value[val + 1].$el
    );
  }
  const p = getTranslate(startI.value as number);
  endP.value = {
    x: p.left,
    y: p.top,
  };
  const yd = startP.value.y - endP.value.y;
  const xd = startP.value.x - endP.value.x;
  console.log(yd, xd);
  workHome.value[val].$el.style.transform = `translateY(${yd}px)`;

  refFun(() => {
    console.log("调用函数");

    workHome.value[val].$el.style.transition = `transform 0.6s`;

    workHome.value[val].$el.style.removeProperty("transform");
  });
  // console.log("end", endP.value);

  // if(workHome.value[val].$el.contains(e.target)) {
  //   console.log('是本身');
  // }else {
  //   console.log('不是本身');
  // }
  // console.log("碰到了");
};

const refFun = (cb:any) => {
  console.log("调用了");
  requestAnimationFrame(() => {
    requestAnimationFrame(cb);
  });
};

// onMounted(() => {
//   console.log(workHome.value);

//   let p = getTranslate(0);
//   startP.value = {
//     y: p.top,
//   };
// });
// const sort = () => {
//   mainBox.value.insertBefore(workHome.value[0], null);
//   const p = getTranslate(0);
//   endP.value = {
//     y: p.top,
//   };
//   const yd = startP.value.y - endP.value.y;
//   workHome.value[0].style.transform = `translateY(${yd}px)`;

//   refFun(() => {
//     workHome.value[
//       0
//     ].style.transition = `transform 1s`;

//     workHome.value[0].style.removeProperty(
//       "transform"
//     );
//   });
// };
</script>

<style scoped lang="less">
.item {
  display: flex;
  flex-wrap: wrap;
  .pic {
    width: 310px;
    height: 50px;
    overflow: hidden;
    transition: all 0.3s;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}
.item-card {
  margin: 0 calc((100% - 310px * 5) / 5 / 2) 20px;
  border-radius: 5px;
  overflow: hidden;

  user-select: none;
  &:hover .pic {
    transform: scale(1.1);
  }
}
:deep(.ant-card-cover) {
  overflow: hidden;
}
.main {
  height: 100%;
  overflow-y: auto;
}
:deep(.ant-card-body) {
  padding: 10px;
}
.text {
  margin-bottom: 5px;
  color: #4a4a4a;
}
.ces {
  width: 500px;
  height: 600px;
  li {
    width: 100%;
    height: 80px;
    margin: 10px 0;
    background-color: pink;
    cursor: pointer;
    border-radius: 10px;
  }
}
</style>
